<template>

	<view >
		<!-- style="height: 100vh;overflow: hidden;" -->
		<view class="status-bar bars" :style="{'height': height}"></view>
		<view-loading v-if="isshow"></view-loading>
		<view
			style="display: flex; background: #fff; position: fixed; z-index: 1; width: 100%; height: 46px; line-height: 46px;">
			<view @click="navselect(index)" :class="num==index?'active':'noactive'" v-for="(item,index) in navlist">
				{{item}}
			</view>
			<view @click="show=true" style="margin-left: auto; ">
				<image style="width: 24px; height:24px;margin-top: 14px; margin-right: 20px;" src="/static/fabu.png">
				</image>
			</view>
		</view>
		<view style="height: 46px;">

		</view>
		<view class="page">
			<!-- <scroll-view :scroll-y="true" @refresherrefresh="refresherrefresh"
			@refresherabort="refresherabort"
			scroll-top="0"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			style="width: 100%;height: 90vh"
			> -->
				<view v-if="num==0">
					<articleList :list="list"></articleList>
					<view-NoData v-if="list.length==0">
				
					</view-NoData>
				</view>
				<view v-if="num==1">
					<articleList :list="list"></articleList>
					<view-NoData v-if="list.length==0">
				
					</view-NoData>
				</view>
				<view v-if="num==2">
					<nearlist :list="list"></nearlist>
					<view-NoData v-if="list.length==0">
				
					</view-NoData>
				</view>
			<!-- </scroll-view> -->
			
		</view>

		<u-popup v-model="show" mode="bottom">
			<view style="line-height: 50px; text-align: center;">
				请选择发布的内容
			</view>
			<view style="padding: 20px; display: flex; text-align: center;">
				<view @click="publish(0)" style="width: 33.3%;">
					<image src="/static/l1.png" style="width: 50px; height: 50px;"></image>
					<view>
						短讯
					</view>
				</view>
				<view @click="publish(1)" style="width: 33.3%;">
					<image src="/static/l2.png" style="width: 50px; height: 50px;"></image>
					<view>
						文章
					</view>
				</view>
				<view @click="publish(2)" style="width: 33.3%;">
					<image src="/static/l3.png" style="width: 50px; height: 50px;"></image>
					<view>
						视频
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <pageLoading></pageLoading> -->
	</view>
</template>

<script>
	import articleList from '@/components/article/list.vue';
	import nearlist from '@/components/article/near.vue';
	import TUIConversationItem from "@/components/tui-conversation/conversation-item/index";
	import TUIMessageList from "@/components/tui-chat/message-list/index";
	import logger from '@/utils/logger';
	import {
		getList,
		concernList
	} from "@/common/config/request.js"

	export default {
		components: {
			articleList,
			nearlist,
			// pageLoading,
			// scroller,
			// iconfont
		},
		data() {
			return {
				isshow: false,
				navlist: [
					'推荐', '关注', '附近'
				],
				num: 0,
				show: false,
				page: 1,
				list: [],
				list2: [],
				height: '',
				pageNum: 1,
				totalPage: 0, //总页数
				lng: "", //经度
				lat: "", //维度
				triggered: false
			};
		},
		onUnload() {
			uni.$TUIKit.off(uni.$TUIKitEvent.SDK_READY, this.onConversationListUpdated);
		},
		onShow() {
			this.list = []
			// this.num = 0
			this.pageNum = 1
			this.getDiLi() //经纬度
			this.show = false
			if (this.num != 1) {
				this.getlist()
			} else {
				this.concernList()
			}
			this.login()
			
			
		},
		onShareAppMessage() {

		},
		onLoad(e) {
			this.height = uni.getSystemInfoSync().statusBarHeight + 'px'
			console.log(this.config.limit)
		},
		onPullDownRefresh() {
			this.pageNum=1
			this.list=[]
			if (this.num != 1) {
				this.getlist()
			} else {
				this.concernList()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		
		onReachBottom() {
			if (this.pageNum < this.totalPage) {
				this.pageNum++
				console.log(this.pageNum)
				if (this.num != 0 || this.num != 2) {
					this.getlist()
				} else {
					this.concernList() //关注列表
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: '暂无更多数据'
				})
			}
		},
		methods: {
			refresherrefresh () {
				this.triggered = true
				console.log('刷新')
				this.pageNum=1
				this.list=[]
				if (this.num != 1) {
					this.getlist()
				} else {
					this.concernList()
				}
				setTimeout(() =>{
					this.triggered = false
					// uni.stopPullDownRefresh(); //停止下拉刷新动画
				}, 1000);
			},
			refresherabort() {
				
			},
			getDiLi() {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						that.lng = res.longitude
						console.log('当前位置的纬度：' + res.latitude);
						that.lat = res.latitude
					}
				});
			},
			// 发布列表
			async getlist() {
				let data = {
					type: this.num == 0 ? 1 : this.num == 2 ? 2 : '',
					limit: this.config.limit,
					page: this.pageNum,
					lng: this.lng||'113.790382', //经度
					lat: this.lat||'34.764397', //维度
				}
				let res = await getList(data)
				this.totalPage = res.data.data.last_page
				var regx = /<[^>]*>|<\/[^>]*>/gm;
				for (let i in res.data.data.data) {
					if (res.data.data.data[i].content) {
						res.data.data.data[i].content = res.data.data.data[i].content.replace(regx, "")
					}
				}
				this.list = [...this.list, ...res.data.data.data]
				// getList(data).then((res) => {
				// 	// console.log(res, '发布列表')
				// 	this.totalPage = res.data.data.last_page
				// 	  var regx = /<[^>]*>|<\/[^>]*>/gm;
				// 	  for(let i in res.data.data.data){
				// 		  if(res.data.data.data[i].content){
				// 			  res.data.data.data[i].content=res.data.data.data[i].content.replace(regx,"")
				// 		  }
				// 	  }
				// 	this.list = [...this.list, ...res.data.data.data]
				// 	// console.log(this.list, 'this.list发布列表')
				// })
			},
			// 关注列表
			async concernList() {
				let res = await concernList({})
				this.totalPage = res.data.data.last_page
				let regx = /<[^>]*>|<\/[^>]*>/gm;
				for (let i in res.data.data.data) {
					if (res.data.data.data[i].content) {
						res.data.data.data[i].content = res.data.data.data[i].content.replace(regx, "")
					}
				}
				this.list = [...this.list, ...res.data.data.data]

				// concernList({}).then((res) => {
				// 	console.log(res, '关注列表')
				// 	// this.list2 = res.data.data.data
				// 	this.totalPage = res.data.data.last_page
				// 	var regx = /<[^>]*>|<\/[^>]*>/gm;
				// 	for(let i in res.data.data.data){
				// 	  // if(res.data.data.data)
				// 	  if(res.data.data.data[i].content){
				// 		  res.data.data.data[i].content=res.data.data.data[i].content.replace(regx,"")
				// 	  }
				// 	}

				// 	this.list = [...this.list, ...res.data.data.data]
				// 	console.log(this.list)
				// })
			},
			// navselect(index) {
			// 	this.num = index
			// 	this.pageNum = 1
			// 	this.list = []
			// 	switch (index) {
			// 		case 0:
			// 			return this.getlist(1)
			// 		case 1:
			// 			return this.concernList()
			// 		case 2:
			// 			return this.getlist(2)
			// 	}
			// },
			navselect(index) {
				this.num = index
				this.pageNum = 1
				this.list = []
				switch (index) {
					case 0:
						return this.getlist()
					case 1:
						return this.concernList()
					case 2:
						return this.getlist()
				}
			},
			publish(e) {
				uni.navigateTo({
					url: `/pages/publish/publish?type=${e}`
				})
			},
			onConversationListUpdated(event) {
				console.log(event.data,'event.dataevent.dataevent.dataevent.data')
						var num=0
						event.data.forEach((item)=>{
							num+=item.unreadCount
						})
						console.log(num ,'ggggg1')
						if(num>0){
							uni.setTabBarBadge({
							  index: 1,
							  text:num.toString()
							})
						}
						if(num==0){
							uni.setTabBarBadge({
							  index: 1,
							  text:0
							})
						}
				// logger.log('TUI-conversation | onConversationListUpdated  |ok');
				// this.setData({
				// 	conversationList: event.data
				// });
			},
			login() {
				// uni.setTabBarBadge({
				//   index: 1,
				//   text: '1'
				// })
				const userID = uni.getStorageSync('userID')
				const userSig = uni.getStorageSync('userSig')
				console.log('腾讯云登录', userID)

				uni.$TUIKit.login({
						userID,
						userSig
					})
					.then(function(imResponse) {
						console.log('登录成功', imResponse.data); // 登录成功
						uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
						uni.$TUIKit.getConversationList().then(res => {
							console.log(res,'imResponse')
							// logger.log(
							// 	`TUI-conversation | getConversationList | getConversationList-length: ${res.data.conversationList.length}`
							// 	);
								var num=0
								res.data.conversationList.forEach((item)=>{
									num+=item.unreadCount
								})
								console.log(num.toString() ,'ggggg')
								if(num>0){
									uni.showTabBarRedDot({
										index: 1,
									})
									uni.setTabBarBadge({
									  index: 1,
									  text:num.toString()
									})
								}
								if(num==0){
									console.log('4444444')
									uni.hideTabBarRedDot({
										index:1
									})
									// uni.setTabBarBadge({
									//   index: 1,
									//   text:0
									// })
								}
								
							// this.setData({
							// 	conversationList: imResponse.data.conversationList
							// });
						}).catch(function(err){
							console.log(err,'errerr')
						})
						if (imResponse.data.repeatLogin === true) {
							// 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
							console.log(imResponse.data.errorInfo);
							
							
						}
					})
					.catch(function(imError) {
						console.log('dddddddd')
						// console.warn('login error:', imError); // 登录失败的相关信息
					})
					uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
					// uni.$TUIKit.getConversationList().then(res => {
					// 	console.log(res,'imResponse')
					// 	// logger.log(
					// 	// 	`TUI-conversation | getConversationList | getConversationList-length: ${res.data.conversationList.length}`
					// 	// 	);
					// 		var num=0
					// 		res.data.conversationList.forEach((item)=>{
					// 			num+=item.unreadCount
					// 		})
					// 		console.log(num,'ggggg')
					// 		if(num>0){
					// 			// uni.setTabBarBadge({
					// 			//   index: 1,
					// 			//   text: '1'
					// 			// })
					// 		}
							
					// 	// this.setData({
					// 	// 	conversationList: imResponse.data.conversationList
					// 	// });
					// }).catch(function(err){
					// 	console.log(err,'errerr')
					// })
					
			}
		}
	};
</script>
<style>
	.noactive {
		margin-left: 20px;
		font-size: 16px
	}

	.active {
		font-size: 16px;
		margin-left: 20px;
		font-weight: bold;
		position: relative;
	}

	.active::before {
		content: '';
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 4px;
		background: #EA9B37;
		border-radius: 12px;
		left: 0;
		bottom: 0;
	}
</style>
<style scoped lang="scss">
	.bars {
		width: 100%;
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}

	page {
		min-height: 100%;
		background: #f0f0f0;
	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.content {
		flex: 1;
		width: 100%;
		height: 100rpx;
	}

	/*头部*/
	.top {

		/*页面标题*/
		.page-title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			text-align: center;
			border-bottom: 1rpx solid #efefef;
			z-index: 9999;
			line-height: 1;

			image {
				height: 50rpx;
				width: 280rpx;
				margin-left: -35rpx;
			}
		}

		/*搜索*/
		.search {
			padding: 24rpx 24rpx 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.logo {
				height: 60rpx;
				width: 474rpx;
				margin-right: 30rpx;
			}

			.input {
				margin-left: 0 !important;
				display: flex;
				align-items: center;
				height: 70rpx;
				width: 100%;
				background: #f5f5f5;
				border-radius: 34rpx 34rpx 0 34rpx;

				/deep/ .icon {
					margin-left: 28rpx;
					color: #aaaaaa;
					font-size: 32rpx;
					line-height: 1;
				}

				text {
					margin-left: 14rpx;
					font-size: 30rpx;
					color: #aaaaaa;
					line-height: 1;
				}
			}

			.user {
				display: flex;
				align-items: center;

				/deep/ .icon {
					margin-left: 24rpx;
					color: #aaaaaa;
					font-size: 38rpx;
					margin-top: 4rpx;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-left: 25rpx;
				}
			}
		}

		/* 顶部navbar */
		.navbar {

			/*分类*/
			.menu {
				position: relative;
				height: 80rpx;
				white-space: nowrap;
				padding: 15rpx 0 6rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: space-between;

				/*分类*/
				.category {
					width: 650rpx;
					margin-left: 30rpx;
					white-space: nowrap;
					position: relative;

					scroll-view {
						width: auto;

						.item {
							position: relative;
							display: inline-block;
							margin: 0 31rpx 0;
							height: 80rpx;
							text-align: left;
							padding-top: 7rpx;

							//line-height: 80rpx;
							&:first-child {
								margin-left: 10rpx;
							}

							&:after {
								content: '';
								width: 0;
								height: 0;
								position: absolute;
								left: 50%;
								bottom: 0;
								transform: translateX(-50%);
								transition: 0.3s;
							}

							.text {
								position: relative;
								width: auto;
								height: auto;
								line-height: auto;
								display: inline-block;

								text {
									font-size: 36rpx;
									font-weight: bold;
									color: #555;
								}

								image {
									position: absolute;
									top: 16rpx;
									right: -14rpx;
									width: 50rpx;
									height: 50rpx;
									display: none;
								}
							}
						}

						.current {
							&:after {
								width: 50%;
							}

							.text {
								text {
									font-size: 40rpx;
									font-weight: bold;
									color: #262626;
								}

								image {
									display: block;
								}

								border-bottom: 6rpx solid #8cc7b5;
							}
						}
					}
				}

				.list {
					width: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					//box-shadow: -4rpx 0 0 #e9ebee;
					//box-shadow: -2px 0 0 #262626;
					/deep/ .icon {
						font-size: 36rpx;
						margin-top: -6rpx;
					}
				}
			}
		}
	}

	.menu-block {
		position: absolute;
		top: 0;
		left: 0;
		background: #fff;
		border-bottom: 1rpx solid #f5f5f5;
		padding: 20rpx 0 50rpx;
		z-index: 100;
		width: 100%;

		//box-shadow: 0 15rpx 10rpx -15rpx #e9ebee;
		.list {
			padding-left: 10rpx;

			text {
				background: #f5f7fa;
				border-radius: 8rpx;
				font-size: 32rpx;
				margin: 12rpx 20rpx;
				display: inline-block;
				height: 72rpx;
				width: 144rpx;
				line-height: 72rpx;
				text-align: center;
			}

			.current {
				color: #fff;
				background: #8cc7b5;
				//font-size: 32rpx;
			}
		}
	}

	.scroll {
		height: 100%;
	}

	/*幻灯片广告 */
	.swiper {
		height: 350rpx;
		margin: 14rpx 24rpx 0;

		image {
			height: 350rpx;
			width: 100%;
			border-radius: 15rpx;
			//box-shadow: 0 0 12px #dddee1;
		}

		.current {
			width: 97%;
			height: 350rpx;
			margin: 1.5% 1.5%;
			transition: all 0.2s ease-in 0s;
		}

		.item {
			position: relative;

			.title {
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				justify-content: center;
				width: 100%;

				text {
					margin: 7% 6%;
					display: flex;
					align-items: center;
					//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
					//background-image: linear-gradient(90deg,rgba(255, 181, 19,.8),rgba(255, 181, 19,.2));
					color: #fff;
					display: -webkit-box;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-size: 34rpx;
					padding: 14rpx 20rpx;
					max-width: 610rpx;
					line-height: 1.3;
					border-radius: 5rpx;
				}
			}
		}
	}

	/*浮动navbar*/
	.floatbar {
		//border-bottom: 1rpx solid #e8e8e8;
		box-shadow: 0px 2px 2px -2px #e8e8e8;
		padding-bottom: 12rpx;
	}

	/deep/ .no-data {
		margin-top: 200rpx;
	}
</style>
